<template>
  <div class="table-container">
    <a-table
      :columns="columns"
      :data-source="tableList"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'pic'">
          <a-image
            v-if="record.pic && record.pic.length > 0"
            :width="50"
            :src="record.pic[0]"
            :preview="{
              src: record.pic[0],
            }"
          />
          <span v-else>-</span>
        </template>
        <template v-if="column.key === 'subTitle'">
          <a-tag :color="SubTypeEnum[record.subTitle as '1' | '2' | '3' | '4'].color">{{
            SubTypeEnum[record.subTitle as '1' | '2' | '3' | '4'].value
          }}</a-tag>
        </template>
        <template v-if="column.dataIndex === 'createdAt'">
          {{ dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定要删除吗？" @confirm="handleDelete(record)">
              <a>删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import type { TableProps } from 'ant-design-vue'
import { SubTypeEnum } from '@/utils/enumeration'
import dayjs from 'dayjs'
export interface DrawItem {
  _id: string
  name: string
  pic: string[]
  price: number
  subTitle: '1' | '2' | '3' | '4'
  createdAt: string
  updatedAt: string
}
defineProps<{
  tableList: DrawItem[]
  pagination: {
    total: number
    current: number
    pageSize: number
  }
}>()
const emit = defineEmits(['changePagination', 'openEdit', 'handleDelete'])

const columns = [
  {
    title: '奖品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '奖品图片',
    dataIndex: 'pic',
    key: 'pic',
  },
  {
    title: '价值',
    dataIndex: 'price',
    key: 'price',
    width: 80,
    customRender: ({ text }: { text: number }) => `¥${(text / 100).toFixed(2)}`,
  },
  {
    title: '奖品标签',
    dataIndex: 'subTitle',
    key: 'subTitle',
    width: 80,
  },

  {
    title: '更新时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
    width: 180,
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 140,
  },
]

const handleTableChange: TableProps['onChange'] = (e) => {
  emit('changePagination', {
    pageSize: e.pageSize,
    current: e.current,
  })
  // 这里添加获取数据的逻辑
}

const handleEdit = (record: DrawItem) => {
  // 这里添加编辑逻辑
  emit('openEdit', record)
}

const handleDelete = (record: DrawItem) => {
  // 这里添加删除逻辑
  // console.log('删除', record)
  emit('handleDelete', record)
}
</script>

<style scoped>
.table-container {
  padding: 10px;
}
</style>
